<template>
  <div>
    <van-row gutter="20" class="title_left">
      <van-col span="8" style="padding-top: 45px">
        <a @click="back" class="back_a" style="color: white; margin-left: 10px">
          返回
        </a>
      </van-col>
      <van-col
        span="8"
        style="text-align: center; color: white; padding-top: 45px"
        >车辆信息管理</van-col
      >
      <van-col span="8"></van-col>
    </van-row>
    <van-row class="topMargin">
      <van-col span="24">
        <van-cell>
          <template #title>
            <van-button plain type="default" size="small" @click="showQuery = true"
              >筛选：{{ queryText }}</van-button
            >
          </template>
          <template #default>
            <van-button
              plain
              type="default"
              size="small"
              icon="add-o"
              @click="toAddCar"
              >新增车辆</van-button
            >
          </template>
        </van-cell>
      </van-col>
    </van-row>
    <van-row>
      <van-col span="24">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <van-cell
            v-for="item in car_list"
            :key="item.id"
            @click="selectCar(item)"
            is-link
          >
            <template #label>
              <div>VIN号: {{ item.vinNo }}</div>
              <div>
                主机厂品牌 - 车系 :
                {{
                  item.vehicleSeries.seriesFactory +
                  item.vehicleSeries.seriesName +
                  item.vehicleBrand.brandName +
                  item.vehicleBrand.brandCode
                }}
              </div>
            </template>
            <template #title>
              <div>
                车牌号: {{ item.plateNum }}
                <van-tag type="primary" size="small">客</van-tag>
              </div>
            </template>
          </van-cell>
        </van-list>

        <van-action-sheet
          v-model="show"
          :actions="actions"
          cancel-text="取消"
          @select="onSelect"
          close-on-click-action
          :description="description"
        />

        <van-action-sheet
          v-model="showQuery"
          :actions="queryActions"
          cancel-text="取消"
          @select="onSelectQuery"
          close-on-click-action
        />
      </van-col>
    </van-row>
  </div>
</template>

<script>
import { Toast } from 'vant';
import { Api } from "../../../api/api_config";

export default {
  data() {
    return {
      car_list: [],
      page: 0,
      pageSize: 5,
      loading: false,
      finished: false,
      currentUser: {},
      totalCount: 0,
      selectedCar: {},
      show: false,
      actions: [
        { name: "查看详情" },
        { name: "编辑车辆" },
        { name: "车辆处置" },
        { name: "申请设备维护" },
      ],
      description: "",
      showQuery: false,
      queryActions: [
        { name: "全部车辆" },
        { name: "准备中" },
        { name: "服役中" },
        { name: "设备维护中" },
        { name: "已处置" },
      ],
      queryText: "",
      queryUrl: "",
    };
  },
  created() {
    this.initData();
  },
  mounted() {},
  methods: {
    initData() {
      this.$store.state.tab_show = true;
      this.currentUser = this.$store.state.configuration.currentUser;
      this.queryUrl =
        Api.Vehicle.get_vehicle.url +
        "?CompanyId=" +
        this.currentUser.depId +
        "&page=" +
        this.page +
        "&pagesize=" +
        this.pageSize;
      this.queryText = '全部车辆';
    },
    toDetail() {},
    back() {
      this.$router.push("/carUsage");
    },
    selectCar(item) {
      this.selectedCar = item;
      this.description =
        this.selectedCar.plateNum +
        "-" +
        this.selectedCar.vehicleSeries.seriesFactory +
        this.selectedCar.vehicleSeries.seriesName;
      this.show = true;
    },
    onLoad() {
      this.loading = true;
      this.page = this.page + 1;
      this.getUrl()
      this.getVehicle();
    },
    getVehicle() {
      Toast.loading({
        message: "加载中...",
        forbidClick: true,
      });
      let that = this;
      this.$axios({
        method: Api.Vehicle.get_vehicle.method,
        url: this.queryUrl,
      })
        .then(function (response) {
          
          response.data.items.forEach((element) => {
            that.car_list.push(element);
          });
          that.totalCount = response.data.totalCount;
          that.loading = false;
          if (that.car_list.length >= that.totalCount) {
            that.finished = true;
          }
          Toast.clear()
        })
        .catch(function (error) {
          console.log(error)
          Toast.clear()
        });
    },
    onSelect(item) {
      this.$store.state.vehicle = this.selectedCar;
      console.log(this.selectedCar);
      switch (item.name) {
        case "查看详情":
          this.$router.push("/carUsage/carManage/carDetail");
          break;
        case "编辑车辆":
          this.$router.push("/carUsage/carManage/editCar");
          break;
        case "车辆处置":
          this.$router.push("/carUsage/carManage/handCar");
          break;
        case "申请设备维护":
          this.$router.push("/carUsage/carManage/repairCar");
          break;
        default:
          break;
      }
    },
    onSelectQuery(item) {
      this.page = 1;
      this.pageSize = 5;
      this.queryText = item.name
      this.car_list = [];
      this.totalCount = 0
      this.finished = false
      this.loading = true;
      this.getUrl()
      this.getVehicle();
    },
    getUrl () {
      this.queryUrl =
        Api.Vehicle.get_vehicle.url +
        "?CompanyId=" +
        this.currentUser.depId +
        "&page=" +
        this.page +
        "&pagesize=" +
        this.pageSize;
      switch (this.queryText) {
        case "全部车辆":
          break;
        case "准备中":
          this.queryUrl += "&RunStatus=1&DeviceStatus=1";
          break;
        case "服役中":
          this.queryUrl += "&RunStatus=1&DeviceStatus=2";
          break;
        case "设备维护中":
          this.queryUrl += "&RunStatus=1&DeviceStatus=3";
          break;
        case "已处置":
          this.queryUrl += "&isUsing=false"
          break;
        default:
          break;
      }
    },
    toAddCar() {
      this.$router.push("/carUsage/carManage/addCar");
    },
  },
};
</script>

<style scoped>
</style>
